<template>
  <div id="app">
    <!-- 头部区域 -->
    <Topbar></Topbar>
    <!-- 导航部分 -->
    <Header></Header>
    <!-- 内容 -->
    <router-view />
    <!-- 底部 -->
    <Footer></Footer>
    <!-- 登录框 -->
    <Login v-show="isShowLoginModal"></Login>
    <!-- 弹出框 -->
    <transition name="slide">
      <Toast v-show="isShowToast"></Toast>
    </transition>
  </div>
</template>

<script>
import Topbar from "@/components/Topbar";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import axios from "@/request/request.js";
import Login from "@/components/Login.vue";
import Toast from "@/components/Toast";
import { JingpinAPI, ReMenAPI } from "@/request/api";
import { mapState } from "vuex";

export default {
  components: {
    Topbar,
    Header,
    Footer,
    Login,
    Toast,
  },
  computed: {
    ...mapState({
      isShowLoginModal: (state) => {
        // console.log(state.showModal);
        return state.showModal.isShowLoginModal;
      },
      isShowToast: (state) => {
        return state.showToast.isShowToast;
      },
    }),
  },
  async created() {
    // axios
    //   .get("/products/recommend")
    //   .then((res) => {
    //     console.log(res);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
    // let res1 = await JingpinAPI();
    // console.log(res1);
    // let res2 = await ReMenAPI();
    // console.log(res2);
  },
};
</script>

<style lang="less">
.slide-enter,
.slide-leave-to {
  opacity: 0;
}

.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.3s linear;
}

.slide-enter-to,
.slide-leave {
  opacity: 1;
}
</style>
